<style lang="less">
    
</style>

<template>
	<modal :title="'修改权限'" :width="'800px'" :height="'60%'" :top="'150px'" @closeModal="closeModal">
		<template slot="body" >
			<Form ref="form" :rules="formValidate" :model="permission" :label-width="90" label-position="left" >
				
				<div v-if="permissionProp.flag == 'firstMenu'" >
					<h2>主菜单路由</h2>
			        <Row type="flex" justify="space-around">
				        <Col span="11">
				            <Form-item label="一级菜单名称:" prop="title" >
				          		<Input v-model="permission.title" placeholder="请输入" :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="11" >
					        <Form-item label="一级菜单编码:" prop="code" >
					            <Input v-model="permission.code" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				    <Row type="flex" justify="space-around">
				        <Col span="11" >
					        <Form-item label="菜单icon:" >
					            <Input v-model="permission.icon" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				        <Col span="11">
				            <Form-item label="路由name:" prop="name" >
				          		<Input v-model="permission.name" placeholder="请输入"  :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				    </Row>
				    <Row type="flex" justify="space-around">
				        <Col span="11">
				            <Form-item label="路由path:" prop="path" >
					            <Input v-model="permission.path" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				        <Col span="11" >
					        
				        </Col>
				    </Row>
				    
				    <hr />
				</div>
				
				<div v-if="permissionProp.flag == 'secondMenu'">
					<h2>二级菜单路由</h2>
			        <Row type="flex" justify="space-around">
				        <Col span="11">
				            <Form-item label="二级菜单名称:" :prop="'title'" :rules="{required: true, message: '二级菜单名称不能为空', trigger: 'blur'}" >
				          		<Input v-model="permission.title" placeholder="请输入"  :maxlength="30"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="11" >
					        <Form-item label="二级菜单编码:" :prop="'code'" :rules="{required: true, message: '二级菜单编码不能为空', trigger: 'blur'}" >
					            <Input v-model="permission.code" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				    
				    <Row type="flex" justify="space-around">
				    	<Col span="11" >
					        <Form-item label="菜单icon:" >
					            <Input v-model="permission.icon" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				        <Col span="11">
				            <Form-item label="路由name:" >
				          		<Input v-model="permission.name" placeholder="请输入"  :maxlength="50"></Input>
				        	</Form-item> 
				        </Col>
				    </Row>
				    
				    <Row type="flex" justify="space-around">
				        <Col span="11">
				            <Form-item label="路由component:" >
				          		<Input v-model="permission.component" placeholder="请输入"  :maxlength="100"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="11" >
					        <Form-item label="路由path:" >
					            <Input v-model="permission.path" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				</div>
				
				<div v-if="permissionProp.flag == 'fun'">
					<h2>功能</h2>
			        <Row type="flex" justify="space-around">
				        <Col span="11">
				            <Form-item label="功能名称:" :prop="'title'" :rules="{required: true, message: '功能名称不能为空', trigger: 'blur'}" >
				          		<Input v-model="permission.title" placeholder="请输入"  :maxlength="12"></Input>
				        	</Form-item> 
				        </Col>
				        <Col span="11" >
					        <Form-item label="功能编码:" :prop="'code'" :rules="{required: true, message: '功能编码不能为空', trigger: 'blur'}" >
					            <Input v-model="permission.code" placeholder="请输入" :maxlength="30"></Input>
					        </Form-item>
				        </Col>
				    </Row>
				</div>
			    
		    </Form>
		    
		    <ButtonGroup style="position: absolute;bottom: 10px;right:60px;">
		        <Button @click="editPermission('form')" type="primary">确定</Button>
		        <Button @click="closeModal()">取消</Button>
		    </ButtonGroup>
		</template>
	</modal>
</template>

<script> 
export default {
   	props: ["permissionProp"],
   	components: {},
    data () {
        return {
			permission: {},
			formValidate: {
				title: [{
					required: true,
					message: '一级菜单名称不能为空',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '一级菜单编码不能为空',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '路由name不能为空',
					trigger: 'blur'
				}],
				path: [{
					required: true,
					message: '路由path不能为空',
					trigger: 'blur'
				}]
			}
        };
    },
    created(){
    	this.permission = this.permissionProp;
	},
    methods: {
    	editPermission(name) {
			this.$refs[name].validate((valid) => {
				if(valid) {
					this.$axios.post(
						'/api/Permission/editPermission.do', 
						JSON.stringify(this.permission), 
						{headers: {'Content-Type': 'application/json;charset=UTF-8'},type: 'json'}
					).then(res => {
						this.$Notice.success({title: '修改成功！'});
						this.closeModal();
						this.$emit("getPermissionList");
					});
				} else {
					this.$Message.warning('表单验证失败!');
				};
			});
		},
    	closeModal() {
	        this.$emit("input", false);
	    }
    }
};
</script>